<template>
  <el-drawer v-model="drawer" :with-header="false" :size="pageSize" ref="drawerRef" :append-to-body="true" width="730px" @close="close" class="purchase-detail">
    <div class="common-layout">
      <el-container>
        <el-aside width="14%">
          <el-menu
              background-color="#ffffff"
              default-active="1"
              style="margin-top: 20px"
          >
            <el-menu-item index="1" @click="index = '1'">
              <el-icon><ele-Menu /></el-icon>
              <span>权限管理</span>
            </el-menu-item>
            <el-menu-item index="2" @click="index = '2'">
              <el-icon><ele-Avatar /></el-icon>
              <span>邀请加入组织</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
<!--          东西不多,有需要再加路由-->
          <el-card class="box-card">
            <div v-if="index === '1'">
              <department-authority :treeData="treeData" />
            </div>
            <div v-if="index === '2'">

            </div>
          </el-card>
        </el-main>
      </el-container>
    </div>
  </el-drawer>
</template>

<script>
import {ref, toRefs, reactive, computed} from 'vue'
import DepartmentAuthority from "/@/components/organize/DepartmentAuthority.vue";
import { structureDepartmentData } from '/@/utils/common'

export default {
  name: "index",
  emits:['onSubmit','update:dialogDrawer'],
  components: {
    DepartmentAuthority
  },
  props: {
    dialogDrawer: {
      type: Boolean,
      default: true,
    },
    treeData:{
      type: Array,
      default: null,
    }
  },
  setup(props, context) {
    const { dialogDrawer, treeData } = toRefs(props)
    let drawer = computed({
      get: () => {
        if (dialogDrawer.value){
          state.dialogDrawer = true
          state.index = '1'
          // const data = structureDepartmentData(treeData.value,0)
          // console.log(data)
        }
        return dialogDrawer.value
      },
      set: val => context.emit('update:dialogDrawer', val)
    })
    const state = reactive({
      pageSize: document.body.clientWidth <= 1400 ? '1220px' : '85%',
      index:'1',
      temp:[],
    })

    // 关闭详情页
    const close = () => {
      context.emit('update:drawer', false)
    }

    return{
      ...toRefs(state),
      DepartmentAuthority,
      drawer,
      dialogDrawer,
      treeData,
      close,

    }
  }
}
</script>

<style scoped lang="scss">
.common-layout{

}

:deep(.el-container .el-menu .is-active){
  background-color: #e7f5ee !important;
  color: #18a058 !important;
}
:deep(.el-container .el-menu .el-menu-item){
  font-weight: bold;
  color: #838383;
}
:deep(.el-container .el-menu .el-menu-item:hover){
  background-color: #dcf5e8 !important;
}
</style>
